

( ()=>{

    window.onload = function(){
        initPage();
    }

    function initPage (){
        new listView().initData();
    }

    class listView {
        constructor (){
            this.searchKey = window.localStorage.getItem("seeyon-dolphin-searchKey") || "";
            this.nav = document.querySelector(".dol-nav");
            this.resultContent = document.querySelector(".result-content");
            this.input = document.querySelector(".dol-input");
            this.input.value = this.searchKey;
            this.input.focus();
            this.resultContent.style.height = window.innerHeight - 174 + "px";
        }
        loading(mark){
            if(mark == undefined || mark){
                loading.init(); 
            }else{
                loading.destory();
            }
        }
        initData (){
            let _this = this;
            //初始化获取数据
            let options= {
                pageNo:1,
                pageSize:20,
                searchKey:this.searchKey
            }
            _this.initListView(options,true);
            _this.initEvent();
        }
        mockData(_options){
            var result= [];
            for(var i=1;i<21;i++){
                result.push(
                    {
                        title: _options.model + "数据管理" + i,
                        content:"数据管理 使用手册(yida/support/dxksq6)页面创建后，宜搭会自动为您提供数据管理，发起的审批单会自动展示在数据管理列表中，包括几部分主要内容，如下图所示，分为：全部数据、导出记录、批量发起记录、打印...",
                        link:"http://172.20.2.20/seeyon/main.do?method=main"
                    }
                );
            };
            return result;
        }
        initListView(options,refresh){
            let _this = this;
            var _options = $.extend({
                pageNo:1,
                pageSize:20,
                searchKey:this.searchKey,
                model:"all"
            },options);
            this.loading();
            
            $.ajax({
                type:"POST",
                url:"",
                data:JSON.stringify(_options),
                success: result =>{
                    setTimeout(() =>{
                        this.loading(false);
                        result = this.mockData(_options);
                        this.resultContent.innerHTML = _this.returnTemplate(result);
                        _this.refreshEvent();
                        refresh && _this.initPagination(3);
                    },500);
                    
                },
                error: e =>{
                    this.loading(false);
                    console.log(e);
                }
            });
        }
        initEvent (){
            let _this = this;
            // 页签点击事件
            $(this.nav).on("click","li",function(){
                var parentNode = this.parentNode;
                parentNode.querySelector(".li.active").classList.remove("active");
                this.classList.add("active");
                var model = $(this).attr("value");
                _this.initListView({model:model});
            });
            //点击搜索按钮
            $(".dol-submit").on("click",function(){
                _this.searchKey = _this.input.value;
                _this.initListView();
            });
            //监听回车键
            this.input.addEventListener("keyup",function(event){
                if(event.keyCode == "13" || event.code == "Enter"){
                    _this.searchKey = _this.input.value;
                    _this.initListView();
                }
            },false);
        }
        refreshEvent (){
            let _this = this;
            //点击title 
            $(".result-item").on("click",".title",function(){
                var href = $(this).attr("href");
                // window.location.href = link;
                window.open(href);
            });
            //点击链接
            $(".result-item").on("click",".link",function(){
                var link = $(this).attr("link");
                // window.location.href = link;
                window.open(link);
            });
            //点击结果正确
            $(".result-item").on("click",".result-success",function(){
                var parentNode = this.parentNode;
                this.classList.add("dol-hidden");
                parentNode.querySelector(".result-error").classList.add("dol-hidden");
                parentNode.querySelector(".success").classList.remove("dol-hidden");
                parentNode.querySelector(".list-reset").classList.remove("dol-hidden");
                _this.itemCheckCallback();
            });
            //点击结果错误
            $(".result-item").on("click",".result-error",function(){
                var parentNode = this.parentNode;
                this.classList.add("dol-hidden");
                parentNode.querySelector(".result-success").classList.add("dol-hidden");
                parentNode.querySelector(".error").classList.remove("dol-hidden");
                parentNode.querySelector(".list-reset").classList.remove("dol-hidden");
                _this.itemCheckCallback();
            });
            //点击撤销
            $(".result-item").on("click",".list-reset",function(){
                var parentNode = this.parentNode;
                this.classList.add("dol-hidden");
                var success = parentNode.querySelector(".success"),
                    error = parentNode.querySelector(".error");
                if(!success.classList.contains("dol-hidden")){
                    success.classList.add("dol-hidden");
                }
                if(!error.classList.contains("dol-hidden")){
                    error.classList.add("dol-hidden");
                }
                parentNode.querySelector(".result-success").classList.remove("dol-hidden");
                parentNode.querySelector(".result-error").classList.remove("dol-hidden");
            });

        }
        //列表点击校验回调
        itemCheckCallback (id,mark){
            let _this = this;
            this.loading();
            $.ajax({
                type:"POST",
                url:"",
                data:"",
                success: result =>{
                    this.loading(false);
                },
                error: e =>{
                    this.loading(false);
                    console.log(e);
                }
            });
        }
        returnTemplate (data){
            if(!data)return;
            let html = '';
            data.forEach( (item,index) =>{
                let title = item.title;
                let content = item.content;
                html += `<div class="result-item">
                            <div class="title" href="">${ title }</div>
                            <div class="content">${ content }</div>
                            <div class="link" link="">${ item.link }</div>
                            <div class="info">
                                <div class="cell result-success">
                                    <img src="./img/result-success.png" alt=""><span>结果正确</span>
                                </div>
                                <div class="cell result-error">
                                    <img src="./img/result-error.png" alt=""><span>结果错误</span>
                                </div>
                                <div class="cell success dol-hidden">
                                    <img src="./img/success.png" alt=""><span>已选择正确结果</span>
                                </div>
                                <div class="cell error dol-hidden">
                                    <img src="./img/error.png" alt=""><span>已选择错误结果</span>
                                </div>
                                <div class="cell list-reset dol-hidden">撤销</div>
                            </div>
                        </div>`;
            });
            return html;
        }
        //初始化底部导航
        initPagination (number){
            const slp = new pagination(number);
            slp.init({
                container: '.navBar',
                maxShowBtnCount: 3,
                onPageChange: state => {
                    //刷新数据
                    this.initListView({
                        pageNo:state.pageNumber
                    },false);
                }
            });
            //触发加载哪一页
            // slp.gotoPage(5);
        }

    }

    // 精简版loading
    var loading = {
        delay:0,
        init:function(){
            this.timer = setInterval(()=>{
                this.delay += 1;
                if(this.delay > 9 ){ //10秒后还不关闭loading抛出错误信息并关闭loading
                    console.log("网络错误");
                    this.destory();
                }
            },1000);
            this.initBackdrop();
            this.initLoding();
        },
        initLoding:function(){
            var createDiv = document.createElement("div");
            createDiv.className = "dol-loading";
            var html = `<div class="loader-inner ball-pulse-sync">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>`;
            createDiv.innerHTML = html;
            document.body.appendChild(createDiv);
        },
        initBackdrop:function(){
            var createDiv = document.createElement("div");
            createDiv.className = "dol-loading-backdrop";
            document.body.appendChild(createDiv);
        },
        destory:function(){
            document.querySelector(".dol-loading-backdrop").remove();
            document.querySelector(".dol-loading").remove();
            this.delay = 0;
            clearInterval(this.timer);
        }
    }




})();